import { createRouter, createWebHistory } from 'vue-router'
import { useUserStore } from '@/stores'

const router = createRouter({
  // Vue3使用的是Router4 但是这里还是用来配置模式的
  // createWebHistory 其实就是典型的history模式 默认不带#的路由模式
  // createHashHistory 表示是哈希路由模式 带#的
  // 我们这里使用的是createWebHistory 底层其实是使用
  // window.history.pushState 和 window.history.replaceState
  history: createWebHistory(import.meta.env.BASE_URL),
  // 综上所述
  // 1.创建路由使用 createRouter实现
  // 2.history模式 使用createWebHistory 地址栏不带#
  // 3.hash模式 使用createHashHistory 地址栏带 #
  // 参数是基础路径 默认是 /
  // 4.createWebHistory括号里面表示的是 我们要访问的路径的前缀 默认是/
  // 5.import.meta.env.BASE_URL是vite中的环境变量 可以在vite.config.js中可以配置 在defineConfig中使用base属性来设置 在vite的官网(环境变量与模式)中都有体现
  routes: [
    // 登录页
    {
      // 异步组件
      path: '/login', component: () => import('@/views/login/LoginPage.vue')
    },
    {
      //
      path: '/',
      component: () => import('@/views/layout/LayoutContainer.vue'),
      // 路由重定向
      redirect: '/article/manage',
      // 二级路由
      children: [
        {
          path: '/article/manage',
          component: () => import('@/views/article/ArticleManage.vue')
        },
        {
          path: '/article/channel',
          component: () => import('@/views/article/ArticleChannel.vue')
        },
        {
          path: '/user/profile',
          component: () => import('@/views/user/UserProfile.vue')
        },
        {
          path: '/user/avatar',
          component: () => import('@/views/user/UserAvatar.vue')
        },
        {
          path: '/user/password',
          component: () => import('@/views/user/UserPassword.vue')
        },

      ]
    },
  ],
})

// 增加登录访问拦截
// 根据返回值决定 =>默认是放行的
// 返回值 undefined/true  放行  false 拦回from的地址页面
// 具体路径 或 路径对象 拦截到对应的地址
// 这里拦截到登录页 直接返回false 让它跳转到登录页
router.beforeEach((to) => {
  // 获取token
  const useStore = useUserStore()
  // 如果token不存在 并且访问的不是登录页 拦截到登录页 
  if (!useStore.token && to.path !== '/login') return '/login'
})
export default router
